from pyecharts import options as opts
from pyecharts.charts import Bar
from pyecharts.commons.utils import JsCode

# 数据准备
cities = ["口红", "面膜", "隔离", "防晒", "精华", "面霜"]
sales = [653, 523, 648, 856, 714, 785]

# 创建Bar对象
bar = Bar(
    init_opts=opts.InitOpts(bg_color="#1A1E43")  # 设置背景颜色
)

# 添加X轴数据
bar.add_xaxis(cities)

# 添加Y轴数据，并设置柱状图样式
bar.add_yaxis(
    "销量",
    sales,
    # 设置柱子的圆角
    itemstyle_opts=opts.ItemStyleOpts(
        border_radius=[10, 10, 0, 0],
        color=JsCode("""
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#00F1FC'},
                {offset: 1, color: '#0055A9'}
            ])
        """)
    ),
    # 设置柱子宽度
    bar_width='30px',
    # 设置鼠标悬停时的高亮颜色
    emphasis_opts=opts.ItemStyleOpts(
        color=JsCode("""
            new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: '#00BFA5'},
                {offset: 1, color: '#00D8FF'}
            ])
        """)
    )
)

# 设置全局配置项
bar.set_global_opts(
    title_opts=opts.TitleOpts(
        title="3月商品销量对比",
        # 设置标题颜色
        title_textstyle_opts=opts.TextStyleOpts(color="#FFFFFF"),
        subtitle="防晒销量最多，3月销量856；面膜最少，3月销量523",
        # 设置副标题颜色
        subtitle_textstyle_opts=opts.TextStyleOpts(color="#FFFFFF")
    ),
    xaxis_opts=opts.AxisOpts(
        axislabel_opts=opts.LabelOpts(color="#FFFFFF"),  # 设置X轴标签颜色
        splitline_opts=opts.SplitLineOpts(is_show=False)  # 去掉X轴网格线
    ),
    yaxis_opts=opts.AxisOpts(
        axislabel_opts=opts.LabelOpts(color="#FFFFFF"),  # 设置Y轴标签颜色
        splitline_opts=opts.SplitLineOpts(
            is_show=True,  # 显示Y轴网格线
            linestyle_opts=opts.LineStyleOpts(type_='dashed', color='#FFFFFF')  # 设置Y轴网格线为虚线
        )
    ),
    legend_opts=opts.LegendOpts(is_show=False)  # 去掉图例
)

# 设置提示框和标签样式
bar.set_series_opts(
    tooltip_opts=opts.TooltipOpts(trigger="item"),
    label_opts=opts.LabelOpts(
        is_show=True,
        position="top",
        color="#FFFFFF",
        rich={
            'a': {
                'color': '#FFFFFF',
                'backgroundColor': 'rgba(21, 46, 92, 0.5)',  # 设置背景颜色并增加透明度
                'borderColor': '#152E5C',
                'padding': [5, 10],  # 内边距
                'align': 'left',
                'borderRadius': 5,  # 设置圆角
                'width': 45,  # 总宽度
                'height': 17
            },
            'dot': {
                'color': '#5B9BD5',
                'backgroundColor': '#5B9BD5',
                'borderColor': '#5B9BD5',
                'padding': [0, 0],
                'align': 'left',
                'width': 8,
                'height': 8,
                'borderRadius': 4
            },
            'value': {
                'color': '#FFFFFF',
                'align': 'left',
                'padding': [0, 0]
            }
        },
        formatter=JsCode("""
            function (params) {
                return '{dot|●}{value| ' + params.value + '}';
            }
        """)
    )
)

# 渲染图表到html文件
bar.render("表3.html")
